import React from 'react';

export default class BlurExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };
    this.timeOutId = null;
  }

  handleBlur = () => {
    this.timeOutId = setTimeout(() => {
      this.setState({
        isOpen: false
      })
    });
  }

  handleFocus = () => {
    clearTimeout(this.timeOutId);
  }

  handleClick = () => {
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }))
  }

  render() {
    return (
      <div
        onBlur={ this.handleBlur }
        onFocus={ this.handleFocus }
      >
        <button
          onClick={ this.handleClick }
          aria-haspopup="true"
          aria-expanded={ this.state.isOpen }
        >
          select an option
        </button>
        { 
          this.state.isOpen && 
          (
            <ul>
              <li>option 1</li>
              <li>option 2</li>
              <li>option 3</li>
            </ul>
          )
        }
      </div>
    )
  }
}